<script setup lang="ts">
import { computed } from 'vue';
import { $t } from '@/locales';

interface Props {
  modelValue: boolean;
  title?: string;
  width?: number | string;
}

const props = withDefaults(defineProps<Props>(), {
  title: $t('common.view'),
  width: 600
});

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void;
}>();

const open = computed({
  get: () => props.modelValue,
  set: value => emit('update:modelValue', value)
});

function handleClose() {
  open.value = false;
}
</script>

<template>
  <ADrawer
    v-model:open="open"
    :title="title"
    :width="width"
    placement="right"
    :closable="true"
    :mask-closable="true"
    :destroy-on-close="true"
  >
    <div class="role-view-content">
      <slot />
    </div>

    <template #footer>
      <div class="flex justify-end">
        <AButton @click="handleClose">
          {{ $t('common.close') }}
        </AButton>
      </div>
    </template>
  </ADrawer>
</template>

<style scoped>
.role-view-content {
  padding: 16px 0;
}
</style>
